import { ExpertAppointmentList } from '@/api/expert';
import Empty from '@/components/Empty';
import StatusIconPrimary from '@/components/StatusIconPrimary';
import { Icon, Skeleton, Tag } from '@antmjs/vantui';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useRequest } from 'taro-hooks';

export default function Page() {
  const { data: list, loading } = useRequest(ExpertAppointmentList);
  if (loading)
    return (
      <View className=' pt-4'>
        <Skeleton title row='3' />
      </View>
    );
  return (
    <>
      {Boolean(!list?.length) && (
        <View className='pt-20'>
          <Empty
            icon={
              <Image
                src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/empty-1.png'
                className=' w-[381px] h-[311px] block -mb-[50px]'
              />
            }
            title='暂无咨询记录'
          />
        </View>
      )}

      {list?.map((item) => (
        <View
          key={item.id}
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/expert/user/records/detail?id=${item.id}`,
            });
          }}
        >
          <View className='flex items-center p-4 rounded-lg bg-white mx-4 mt-4'>
            <View className='flex-1'>
              <Text className=' block text-lg text-black'>
                {item.create_time}
              </Text>
              <Text className=' block text-sm text-black mt-1'>
                {item.name} {item?.company}
              </Text>
            </View>

            <Icon name='arrow' className=' text-gary2' />
          </View>
          <View className='flex justify-between bg-[#F9FBFC] rounded-lg p-4 mx-4'>
            <StatusIconPrimary />

            {item.status === 3 && (
              <>
                {(!item.suggest && (
                  <View className=' text-xs text-primary flex items-center'>
                    <Tag type='warning' className=' mr-1 text-xs text-white'>
                      完成评价后发放积分
                    </Tag>
                    <View
                      className='w-[32px] h-[32px] bg-cover mr-1'
                      style={{
                        backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-icon-1.svg)`,
                      }}
                    />
                    待评价
                  </View>
                )) || (
                  <View className=' text-xs text-success flex items-center'>
                    <View
                      className='w-[32px] h-[32px] bg-cover mr-1'
                      style={{
                        backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-icon-2.svg)`,
                      }}
                    />
                    已完成
                  </View>
                )}
              </>
            )}

            {item.status === 1 && (
              <View className=' text-xs text-warn flex items-center'>
                <View
                  className='w-[32px] h-[32px] bg-cover mr-1'
                  style={{
                    backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-icon-3.svg)`,
                  }}
                />
                已预约
              </View>
            )}

            {item.status === 2 && (
              <View className=' text-xs text-gary4 flex items-center'>
                <View
                  className='w-[32px] h-[32px] bg-cover mr-1'
                  style={{
                    backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-icon-4.svg)`,
                  }}
                ></View>
                已取消
              </View>
            )}
          </View>
        </View>
      ))}
    </>
  );
}
